<template>
  <div class="branchCode clearfix">
    <div class="logoBg"><img src="~@/assets/images/common/fiveG.png"></div>
    <div class="heading">收入分析：<span class="redTitle">{{mainTopicContent}}</span></div>
    <div class="content">
      <div class="echartBox clearfix">
        <div class="rightEchart" v-for="(item,index) in incomeData" :key="index">
          <barEchart :lineObj="item" :trendTimeArea='trendTimeArea'></barEchart>
          <div :class="{'bg':bgRedArea.indexOf(item.areaName)>-1,'bg1':bgRedArea.indexOf(item.areaName)<0}"></div>
        </div>
      </div>
      <div class="tableDiv">
        <div class="title">{{leftTopicContent}}</div>
        <div class="tableBox">
          <el-table border stripe style="width: 100%" class="tableTh28" ref="table" :data="tableData">
            <el-table-column v-for="(item,index) in colList" :key="index" :label="item" :prop="'rate'+index" min-width="50">
              <template slot-scope="scope">
                <span v-if="index>colListLength-4" style="color:#c00000">{{scope.row['rate'+index]}}</span>
                <span v-else style="color: #333">{{scope.row['rate'+index]}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-top: 10px;">注：收入环比平均增长率=(统计月当月收入/{{dscAvg}}-1)/间隔月份</div>
      </div>

    </div>
  </div>
</template>

<script>
  import barEchart from "@/views/budget/showPdf/showEchart/barEchart";
  import {
    $budgetAPI
  } from "@/api";
  import {
    getCookie
  } from "@/common/js/cookie"
  import {
    mergeTableRow,
    mergeSpan
  } from "@/utils/mixin";
  import {
    getSessionStorage
  } from "@/common/js/storage";
  let accountInfo = JSON.parse(getSessionStorage('accountInfo'))
  export default {
    name: "overallTrend",
    components: {
      barEchart,
    },
      props: ["areaId", "month"],
    data() {
      return {

        mainTopicContent: '',
        hangzhouData: {},
        ningboData: {},
        wenzhouData: {},
        jiaxingData: {},
        huzhouData: {},
        shaoxingData: {},
        jinhuaData: {},
        quzhouData: {},
        lishuiData: {},
        taizhouData: {},
        zhoushanData: {},
        allData: {},
        leftTopicContent: '',
        colList: [],
        tableData: [],
        bgRedArea: [],
        dscAvg: [],
        colListLength: '',
        trendTimeArea: [],
        incomeData: [],
      }
    },
    methods: {
      getPlatformData() {
        var that = this
        $budgetAPI.getPlatformData({
            areaId:this.areaId,
            accMonth:this.month
          },
          res => {
            if (res && res.code == 0) {
                that.tableData=[]
                that.colList=[]
              that.mainTopicContent = res.content.mainTopicContent
              that.trendTimeArea = res.content.trendTimeArea
              that.leftTopicContent = res.content.leftTopicContent
              let str = that.leftTopicContent.split('与')
              that.dscAvg = str[1].split('环')[0]
              let object = {};
              res.content.averageIncreaseData.map((item, index) => {
                that.colList[index] = item.areaName
                if(item.rate!=null && item.rate != ''){
                    object['rate' + index] = item.rate + '%'
                }else if(item.rate == 0){
                   object['rate' + index] = 0 + '%'
                }
                else{
                   object['rate' + index] = ''

                }
              })
              that.colListLength = that.colList.length;
              that.bgRedArea = that.colList.slice(-3) //取数组的后三位
              that.tableData.push(object)
              for (let i = 0; i < that.trendTimeArea.length; i++) {
                that.trendTimeArea[i] = that.trendTimeArea[i].substring(2, 6)
              }
              let incomeData = [];
              res.content.areaTrendData.map((item, index) => {
                this.$set(item, "className", "income" + index);
                incomeData.push(item);
              });
              this.incomeData = incomeData;

            } else {
              this.alertError(res);
            }
            setTimeout(() => {
              this.$refs.table.doLayout();
            }, 500);
          },
          err => {}
        )
      }

    },
  }
</script>

<style lang="scss" scoped>
  .branchCode {
    padding: 20px;
    border: 1px solid #dee5f3;
    border-radius: 5px;
    margin-top: 20px;
    position: relative;

    .branchCode.clearfix:after,
    .branchCode.clearfix:before {
      content: "";
      display: table;
    }

    .branchCode.clearfix:after {
      clear: both;
    }

    .branchCode.clearfix {
      *zoom: 1;
    }

    .logoBg {
      position: absolute;
      right: 20px;
      top: 20px;
    }

    .heading {
      font-size: 22px;
      font-weight: 700;
      text-align: center;
      padding-bottom: 40px;

      .redTitle {
        color: #c00000
      }
    }

    .content {
      .tableDiv {
        .title {
          font-size: 16px;
          font-weight: 700;
          text-align: center;
          margin-bottom: 10px;
        }

        .tableBox {
          border-top: 1px solid #9abcf1;
          border-left: 1px solid #bfbfbf;
          border-right: 1px solid #bfbfbf;
          border-bottom: 1px solid #bfbfbf;

          /deep/ .tableTh28 .el-table__header {
            .first-title.is-leaf {
              position: relative;
              border-right: 1px solid #d7e5fb !important;

              .cell {
                color: #d7e5fb;
              }
            }

            .second-title.is-leaf {
              overflow: visible;

              .cell {
                transform: translateX(-60%);
              }
            }
          }

          /deep/ .el-table tr:last-child td {
            color: #333;
            text-align: center;
            border-bottom: 1px solid transparent !important;
            border-right: 1px solid #bfbfbf !important;
          }
        }

      }

      .desc {
        margin-bottom: 20px;

        .growthRate {}

        .budget {}

        .weightFont {
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 10px;

          .redFont {
            color: #c00000;
          }

          .normalFont {
            font-weight: normal;
            font-size: 16px;
          }

          .lingxing {
            width: 10px;
            height: 10px;
            background-color: #000000;
            transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            /* Internet Explorer */
            -moz-transform: rotate(45deg);
            /* Firefox */
            -webkit-transform: rotate(45deg);
            /* Safari 和 Chrome */
            -o-transform: rotate(45deg);
            /* Opera */
            margin-right: 7px;
            display: inline-block;
          }
        }

        .redTitle {
          color: #c00000;
          font-size: 18px;
          font-weight: 700;
          margin-top: 10px;
        }

        .normalFont {
          font-size: 16px;
        }

        .normalRedFont {
          font-size: 16px;
          color: #c00000;
        }

        .marg {
          margin-top: 20px;
        }

        .budget {
          margin-top: 20px;
        }
      }

      .echartBox {
        margin-bottom: 10px;

        .echartBox.clearfix:after,
        .echartBox.clearfix:before {
          content: "";
          display: table;
        }

        .echartBox.clearfix:after {
          clear: both;
        }

        .echartBox.clearfix {
          *zoom: 1;
        }

        .rightEchart {
          position: relative;
          display: inline-block;
          height: 200px;
          width: 32%;
          margin-right: 2%;
          float: left;
          &:nth-child(3n) {
            margin-right: 0;
          }

          .bg {
            position: absolute;
            left: 0;
            right: 0px;
            bottom: 20px;
            top: 30px;
            background-color: rgb(240, 222, 219);
          }

          .bg1 {
            position: absolute;
            left: 0;
            right: 0px;
            bottom: 20px;
            top: 30px;
            background-color: rgb(219, 238, 244);
          }
        }
      }

    }
  }
</style>
